<template>
  <div id="CompositionAPI">
    您选择的用户是：{{ user.name }}
    ,为其生成的号码为：
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
    搜索： <input type="text" v-model="searchQuery" /> <br />
    搜索结果：
    <ul>
      <li v-for="(item, index) in matchingSearchList" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
// 组合式API的使用
import {
  reactive,
  ref,
  onBeforeMount,
  watch,
  toRefs,
  computed,
  nextTick,
} from "vue";

function getListByUser() {
  // let list = [];//非响应式

  let list = ref([]);
  const getList = () => {
    const arr = [];
    for (let i = 0; i <= 5; i++) {
      arr.push(Math.floor(Math.random() * 10));
    }
    list.value = arr;
  };
  return { getList, list };
}
function getMatchingList(list) {
  const searchQuery = ref("");
  const matchingSearchList = computed(() =>
    list.value.filter((item) => item == searchQuery.value)
  );
  return { searchQuery, matchingSearchList };
}
const myMixin = {
  beforeCreate() {
    console.log("I am from myMixin");
  },
};
export default {
  mixins: [myMixin],
  props: {
    user: {
      type: Object,
    },
  },
  beforeCreate() {
    console.log("I am from component");
  },
  data() {
    return {
      userId: 1,
    };
  },
  //   watch: {
  //     userId: "getList",
  //   },
  setup(props) {
    console.log("I am from setup");
    const { user } = toRefs(props);

    const { getList, list } = getListByUser();

    onBeforeMount(getList);
    watch(user, getList);

    const { searchQuery, matchingSearchList } = getMatchingList(list);
    nextTick(() => {
      console.log(document.body);
    });
    return { name: "lily", getList, list, searchQuery, matchingSearchList };
  },
};
</script>

<style lang="less" scoped>
#CompositionAPI {
  background-color: #f5f5f5;
}
</style>